import React, {Component} from 'react'
import {Platform} from 'react-native'
import {StackNavigator, TabNavigator} from 'react-navigation'
import broadcastList from '../components/home_pages/broadcast_list'
import broadcastShow from '../components/home_pages/broadcast_show'
import planShow from '../components/calendars/plan_show'
import planNew from '../components/calendars/plan_new'
import planEdit from '../components/calendars/plan_edit'
import homePageIndex from '../components/home_pages'
import functionsPageIndex from '../components/functions_page'
import calendarIndex from '../components/calendars'
import BaseApply from '../components/applies/base'
import Audits from '../components/applies/audits'
import Executions from '../components/applies/executions'
import ApplyShow from '../components/applies/show'
import SelectUser from '../components/users/select'
import searchApply from '../components/functions_page/searchApply'
import searchCarAppoint from '../components/functions_page/searchCarAppoint'
import personalIndex from '../components/personal'
import denyReason from '../components/applies/denyReason'
import changeSchool from '../components/users/changeSchool'
import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator'
import Icon from 'react-native-vector-icons/Ionicons'
import store from '../redux/store'
import {I18n} from '../configs/enumeration'

const currentLanguage = () => store.getState().user.language || 'cn';

const MainPage = TabNavigator({
  homePage: {
    screen: homePageIndex,
    navigationOptions: {
      tabBarLabel: '消息',
      tabBarIcon: ({focused}) => {
        return (<Icon size={26} color={focused ? '#339aff' : 'grey'} name={focused ? 'ios-home' : 'ios-home-outline'}/>)
      }
    }
  },

  calendar: {
    screen: calendarIndex,
    navigationOptions: {
      tabBarLabel: 'Schedule',
      tabBarIcon: ({focused}) => {
        return (<Icon size={26} color={focused ? '#339aff' : 'grey'} name={focused ? 'ios-home' : 'ios-home-outline'}/>)
      }
    }
  },

  tool: {
    screen: functionsPageIndex,
    navigationOptions: {
      tabBarLabel: '功能',
      tabBarIcon: ({focused}) => {
        return (<Icon size={26} color={focused ? '#339aff' : 'grey'} name={focused ? 'ios-home' : 'ios-home-outline'}/>)
      }
    }
  },

  personal: {
    screen: personalIndex,
    navigationOptions: {
      tabBarLabel: '我的',
      tabBarIcon: ({focused}) => {
        return (<Icon size={26} color={focused ? '#339aff' : 'grey'} name={focused ? 'ios-home' : 'ios-home-outline'}/>)
      }
    }
  }
}, {
  tabBarPosition: 'bottom',
  swipeEnabled: true,
  animationEnabled: false,
  lazy: true,
  //tabBarComponent: TabBar,
  tabBarOptions: {
    activeTintColor: '#5daeff',
    showIcon: true,
    labelStyle: {
      fontSize: 10,
      marginTop: Platform.select({ios: 10, android: 0}),
      color: 'gray'
    },
    style: {
      height: 54,
      backgroundColor: 'white'
    },

    indicatorStyle: {
      height: 0
    }
  }
});

const AppNavigation = StackNavigator({
  mainPage: {
    screen: MainPage
  },

  apply_list: {
    screen: BaseApply
  },
  audit_list: {
    screen: Audits
  },
  execution_list: {
    screen: Executions
  },
  apply_show: {
    screen: ApplyShow
  },
  deny_reason: {
    screen: denyReason
  },
  select_user: {
    screen: SelectUser
  },
  change_school: {
    screen: changeSchool
  },
  searchApply: {
    screen: searchApply
  },
  searchCarAppoint: {
    screen: searchCarAppoint
  },
  broadcastList: {
    screen: broadcastList,
    navigationOptions: {
      title: I18n('broadcast', 'list')
    }
  },

  broadcastShow: {
    screen: broadcastShow,
    navigationOptions: {
      title: I18n('schedule', 'detail')
    }
  },

  planShow: {
    screen: planShow,
    navigationOptions: {
      title: I18n('schedule')
    }
  },

  planNew: {
    screen: planNew,
    navigationOptions: {
      title: I18n('add_calendar')
    }
  },

  planEdit: {
    screen: planEdit,
    navigationOptions: {
      title: I18n('edit', 'calendar')
    }
  },


}, {
  mode: 'card',
  navigationOptions: {
    gesturesEnabled: true,
    headerTintColor: 'white',
    headerTitleStyle: {
      alignSelf: 'center',
      color: 'white',
      fontSize: 20,
    },

    headerStyle: {
      backgroundColor: '#4077f8',
      borderBottomWidth: 0,
      elevation: 0

    },

    headerBackTitleStyle: {
      color: 'white'
    },
  },

  transitionConfig: () => ({
    screenInterpolator: CardStackStyleInterpolator.forHorizontal,
  }),

});

export default AppNavigation


